<template>
    <div class="allBD">
      <div class="title">
        <div class="title-text">新歌</div>
        <div class="title-text">新碟</div>
        <div class="title-but">更多></div>
      </div>
      <!-- 滚动所需的容器 -->
      <div class="wrapper" ref="wrapper">
        <ul class="table">
          <!-- 遍历tracks获取详细信息 -->
          <div  class="ietm-direction">
              <div v-for="(item,index) in data.slice(0,3)" :key="index">
                <li class="item-item" v-for="(iteml,indexl) in item.artists.slice(0,1)" :key="indexl">
                  <!-- <img src="../image/01.jpg" class="imgsize"> -->
                  <img class="imgsize" :src="item.album.blurPicUrl">
                  <div class="item-v">
                    <div  class="item-r">
                      <span class="item-song">{{item.name}}</span>
                      <span class="item-sing">-{{iteml.name}}</span>
                    </div>
                    <span class="company">{{item.album.company}}</span>
                  </div>           
                </li>
              </div>
          </div>
          
          <div  class="ietm-direction">
              <div v-for="(item,index) in data.slice(3,6)" :key="index">
                <li class="item-item" v-for="(iteml,indexl) in item.artists.slice(0,1)" :key="indexl">
                  <!-- <img src="../image/01.jpg" class="imgsize"> -->
                  <img class="imgsize" :src="item.album.blurPicUrl">
                  <div class="item-v">
                    <div  class="item-r">
                      <span class="item-song">{{item.name}}</span>
                      <span class="item-sing">-{{iteml.name}}</span>
                    </div>
                    <span class="company">{{item.album.company}}</span>
                  </div>           
                </li>
              </div>
          </div>
          
          <div  class="ietm-direction">
              <div v-for="(item,index) in data.slice(6,9)" :key="index">
                <li class="item-item" v-for="(iteml,indexl) in item.artists.slice(0,1)" :key="indexl">
                  <!-- <img src="../image/01.jpg" class="imgsize"> -->
                  <img class="imgsize" :src="item.album.blurPicUrl">
                  <div class="item-v">
                    <div  class="item-r">
                      <span class="item-song">{{item.name}}</span>
                      <span class="item-sing">-{{iteml.name}}</span>
                    </div>
                    <span class="company">{{item.album.company}}</span>
                  </div>           
                </li>
              </div>
          </div>
        </ul>
      </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data(){
    return{
      data:[],
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      this.$request('get','/top/song?type=7').then((res)=>{
        console.log(res);
        this.data=res.data;

        this.$nextTick(()=>{
        this.scroll = new BScroll(this.$refs.wrapper,{
          startX:0,
          scrollX:true,
          scrollY:false,
        });     
      });   
      })
    },
  },   
}
</script>
<style scoped>
  .allBD{
    display: flex;
    flex-direction: column;
    width: 414px;
    height: 300px;
    margin: auto;
    /* border: 0.5px solid #e7e7e7; */
    border-radius: 10px;
    box-shadow:0px 0px 3px 3px#e9e7e7;
    background-color: rgb(255, 255, 255);
    margin-bottom: 10px;
  }
  .title{
    position: relative;
    display: flex;
    flex-direction: row;
  }
  .title-text{
    font-size: 25px;
    margin: 10px;
    font-style: inherit;
  }
  .title-but{
    position: absolute;
    right: 0px;
    margin: 10px;
    border: 1px solid gray;
    border-radius: 12px;
    /* text-align: center; */
    font-style: inherit;
    width: 50px;
    height: 30px;
  }
  .wrapper{
  /* 容器的宽度就是屏幕的宽度 */
    width: 414px;
    overflow: hidden;
}
.table{
  display: flex;
  flex-direction: row;
  height:340px;
  background-color: white;

}
.ietm-direction{
  display: flex;
  flex-direction: column;
  width: 344px;
  margin: 5px;
}
.imgsize{
  margin-left: 5px;
  /* 图片圆角 */
  border-radius: 5px;
  width: 50px;
  height: 50px;
}
ul.table{
  width: calc(3*344px);
}
.item-item{
  display:flex;
  flex-direction: row;
  /* align-items:center;居中  */
  margin-top: 20px;
}
.item-r{
  display:flex;
  flex-direction: row;
  /* align-items:center;居中  */
  margin-bottom: 5px;
  text-align: left;
}
/* 设置歌手歌曲与公司换行垂直对齐 */
.item-v{
  display:flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top: 3px;
  text-align: left;
  font-size: 15px;
    color: #b8b8b8;
}
.item-song{
  /* 设置超出部分显示为... */
/*   
  overflow: hidden;
  width: 150px;
  text-overflow:ellipsis;
  white-space: nowrap; */
  font-size: 15px;
  font-style:inherit;
  color: #000;
}
.item-sing{
  /* 设置超出部分显示为... */
  overflow: hidden;
  width: 100px;
  font-size: 15px;
  text-overflow:ellipsis;

  white-space: nowrap;
  margin-left: 40px;

}
</style>